<template>
	<div class="list">
		<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
			<el-tab-pane label="待审核" name="first">
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar">
					<el-date-picker
						v-model="filters2.time"
						type="datetimerange"
						:picker-options="pickerOptions"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd hh:mm:ss"
						@change="getTableData2"
					>
					</el-date-picker>
					<el-input placeholder="请输入内容" v-model="filters2.name" class="search">
						<el-button slot="append" icon="el-icon-search" @click="getTableData2"></el-button>
					</el-input>
				</el-col>
				<el-table :data="tableData2" v-loading="listLoading" stripe style="width: 100%">
					<!-- <el-table-column type="expand">
						<template slot-scope="props">
							<div class="table-expand clear">
								<dl>
									<dt>监测作品名称</dt>
									<dd>{{ props.row.product_name }}</dd>
								</dl>
								<dl>
									<dt>作品类型</dt>
									<dd>{{ props.row.product_type_zh }}</dd>
								</dl>
								<dl>
									<dt>著作权人</dt>
									<dd>{{ props.row.product_rightowner }}</dd>
								</dl>
								<dl>
									<dt>监测周期</dt>
									<dd>{{ props.row.period_name }}</dd>
								</dl>
								<dl>
									<dt>作品正版样本</dt>
									<dd>
										<span v-for="(item,index) in props.row.product_simple" :key="index"><b v-if="index !=0 ">，</b><a :href="`${fileUrl}${item}`" target="_blank" download>{{`正版样本${index+1}下载`}}</a></span>
									</dd>
								</dl>
								<dl>
									<dt>作品正版链接</dt>
									<dd>
										<div class="dd-div" v-for="(item,index) in props.row.product_url" :key="index"><a :href="item" target="_blank">{{item}}</a></div>
									</dd>
								</dl>
							</div>
						</template>
					</el-table-column> -->
                    <el-table-column prop="requires_id" label="ID" width="50"></el-table-column>
					<!-- <el-table-column prop="o_id" label="订单号"></el-table-column> -->
					<el-table-column prop="product_name" label="监测作品名称"></el-table-column>
					<el-table-column prop="product_type_zh" label="作品类型"></el-table-column>
					<el-table-column prop="product_rightowner" label="著作权人"></el-table-column>
					<el-table-column prop="period_name" label="监测周期"></el-table-column>
                    <el-table-column label="详情">
						<template slot-scope="scope">
							<span class="hover" @click="requiresDetails(scope.$index, scope.row)">查看</span>
						</template>
					</el-table-column>
					<el-table-column prop="add_time" label="申请时间"></el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<span class="hover" @click="requiresAllow(scope.$index, scope.row, 2)">通过</span>
							<span class="hover" @click="requiresAllow(scope.$index, scope.row, 1)">不通过</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar" style="padding-top:10px">
					<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
					<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange2" :page-size="10" :total="total2" style="float:right;">
					</el-pagination>
				</el-col>
			</el-tab-pane>
			<el-tab-pane label="已审核" name="second">
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar">
					<el-date-picker
						v-model="filters1.time"
						type="datetimerange"
						:picker-options="pickerOptions"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd hh:mm:ss"
						@change="getTableData1"
					>
					</el-date-picker>
					<el-input placeholder="请输入内容" v-model="filters1.name" class="search">
						<el-button slot="append" icon="el-icon-search" @click="getTableData1"></el-button>
					</el-input>
				</el-col>
				<el-table :data="tableData1" v-loading="listLoading" stripe style="width: 100%">
					<!-- <el-table-column type="expand">
						<template slot-scope="props">
							<div class="table-expand clear">
								<dl>
									<dt>监测作品名称</dt>
									<dd>{{ props.row.product_name }}</dd>
								</dl>
								<dl>
									<dt>作品类型</dt>
									<dd>{{ props.row.product_type_zh }}</dd>
								</dl>
								<dl>
									<dt>著作权人</dt>
									<dd>{{ props.row.product_rightowner }}</dd>
								</dl>
								<dl>
									<dt>监测周期</dt>
									<dd>{{ props.row.period_name }}</dd>
								</dl>
								<dl>
									<dt>作品正版样本</dt>
									<dd>
										<span v-for="(item,index) in props.row.product_simple" :key="index"><b v-if="index !=0 ">，</b><a :href="`${fileUrl}${item}`" target="_blank" download>{{`正版样本${index+1}下载`}}</a></span>
									</dd>
								</dl>
								<dl>
									<dt>作品正版链接</dt>
									<dd>
										<div class="dd-div" v-for="(item,index) in props.row.product_url" :key="index"><a :href="item" target="_blank">{{item}}</a></div>
									</dd>
								</dl>
							</div>
						</template>
					</el-table-column> -->
                    <el-table-column prop="requires_id" label="ID" width="50"></el-table-column>
					<el-table-column prop="o_id" label="订单号"></el-table-column>
					<el-table-column prop="product_name" label="监测作品名称"></el-table-column>
					<el-table-column prop="product_rightowner" label="著作权人"></el-table-column>
					<el-table-column prop="period_name" label="监测周期"></el-table-column>
                    <el-table-column label="详情">
						<template slot-scope="scope">
							<span class="hover" @click="requiresDetails(scope.$index, scope.row)">查看</span>
						</template>
					</el-table-column>
					<el-table-column prop="check_time" label="审核时间"></el-table-column>
					<el-table-column prop="ownertype_zh" label="审核员"></el-table-column>
					<el-table-column label="汇款单">
						<template slot-scope="scope">
							<span class="hover" @click="requiresReceipt(scope.$index, scope.row)">查看</span>
						</template>
					</el-table-column>
					<el-table-column label="监测状态" width="120">
						<template slot-scope="scope">
							<span v-if="scope.row.status != 2">
								{{scope.row.status_zh}}
							</span>
							<span v-else class="hover" @click="requiresBegin(scope.$index, scope.row)">开始监测</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 工具条 -->
				<el-col :span="24" class="toolbar" style="padding-top:10px">
					<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量密码重置</el-button> -->
					<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange1" :page-size="10" :total="total1" style="float:right;">
					</el-pagination>
				</el-col>
			</el-tab-pane>
		</el-tabs>

		<!-- 编辑 -->
		<el-dialog title="汇款单号" :visible.sync="formEditVisible" width="500px">
			<el-table :data="tableReceipt" v-loading="listLoading" stripe style="width: 100%">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="add_time" label="上传时间"></el-table-column>
				<el-table-column prop="receipt_number" label="汇款单号"></el-table-column>
			</el-table>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog title="详情" :visible.sync="detailsVisible" width="500px" class="details">
			<el-form ref="details" :model="details" label-width="110px">
				<el-form-item label="监测作品名称">
					{{ details.product_name }}
				</el-form-item>
				<el-form-item label="作品类型">
					{{ details.product_type_zh }}
				</el-form-item>
				<el-form-item label="著作权人">
					{{ details.product_rightowner }}
				</el-form-item>
				<el-form-item label="监测周期">
					{{ details.period_name }}
				</el-form-item>
				<el-form-item label="作品正版样本">
					<span v-for="(item,index) in details.product_simple" :key="index"><b v-if="index !=0 ">，</b><a :href="`${fileUrl}${item}`" target="_blank" download>{{`正版样本${index+1}下载`}}</a></span>
				</el-form-item>
				<el-form-item label="作品正版链接">
					<div class="dd-div" v-for="(item,index) in details.product_url" :key="index"><a :href="item" target="_blank">{{item}}</a></div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import { requiresGetlist,requiresCheck,receiptGetlist,requiresRun,host } from '@/api';
	import { setStore, getStore } from '@/config/mUtils'

	export default {
		data() {
			return {
				fileUrl: host+'/cam/public/static/',
				activeName: 'first',
				// 翻页
				total1: 0,
				page1: 1,

				total2: 0,
				page2: 1,
				listLoading: false,
				
				//以上是自己测试
				filters1: {
					time: [],
					name: '',
					product_type: '',
				},
				filters2: {
					time: [],
					name: '',
					product_type: '',
				},

				// 表格
				tableData1: [],
				tableData2: [],
				tableReceipt: [],

				// 编辑弹出框
				
				formEditVisible: false,
				formEdit: {
					username: '',
					// password: '',
					right_id: [],
				},
				formEditRules: {
					username: [{ required: true, message: '请填写用户名'}],
					// password: [{ required: true, message: '请填写密码'}],
					right_id: [{ required: true, message: '请选择用户权限'}],
				},
				
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit('pick', [start, end]);
						}
					}]
				},
				details: {},
				detailsVisible: false,

			}
		},
		mounted() {
			this.activeName = getStore('orderActiveName'); // 设置默认待审核、已审核
			this.getTableData1();
			this.getTableData2();
		},
		computed: {
			...mapState([
				'crocUser',
			]),
		},
		methods: {
			...mapMutations([
				'OUT_LOGIN',
			]),
			handleClick(tab, event) {
				setStore('orderActiveName', tab.name);
			},
			requiresDetails(index,row){
				this.details = Object.assign({},row);
				this.detailsVisible = true;
			},
			requiresAllow(index,row,status){
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id,
					status: status,
				};

				requiresCheck(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.getTableData1();
						this.getTableData2();
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			// 翻页 
			handleCurrentChange1(val) {
				this.page1 = val;
				this.getTableData1();
			},
			handleCurrentChange2(val) {
				this.page2 = val;
				this.getTableData2();
			},
			getTableData1(){
				this.listLoading = true;
				let para = {
					stime: this.filters1.time?this.filters1.time[0]:'',
					etime: this.filters1.time?this.filters1.time[1]:'',
					name: this.filters1.name,
					product_type: this.filters1.product_type,
					status: 2,
					uid: this.crocUser.uid,
					page: this.page1,
					pagesize: 10,
				};

				requiresGetlist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total1 = res.total;
						this.tableData1 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			getTableData2(){
				this.listLoading = true;
				let para = {
					stime: this.filters2.time?this.filters2.time[0]:'',
					etime: this.filters2.time?this.filters2.time[1]:'',
					name: this.filters2.name,
					product_type: this.filters2.product_type,
					status: 0,
					uid: this.crocUser.uid,
					page: this.page2,
					pagesize: 10,
				};

				requiresGetlist(para).then(res => {
					this.listLoading = false;
					if (res.data) {
						this.total2 = res.total;
						this.tableData2 = res.data;
					}else if(res.tologin) {
						this.OUT_LOGIN();
						this.$router.push('/login');
					}else {
						this.$message.error(res.msg);
					}
				});
			},
			async requiresReceipt(index,row){
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id
				}
				let res = await receiptGetlist(para);
				if (res.data) {
					this.tableReceipt = res.data;
				}else if(res.tologin) {
					this.OUT_LOGIN();
					this.$router.push('/login');
				}else if(res.msg =='没有符合的记录'){
					this.tableReceipt = [];
				}else {
					this.$message.error(res.msg);
				}
				this.formEditVisible = true; //显示编辑框

			},
			async requiresBegin(index,row){
				let para = {
					uid: this.crocUser.uid,
					requires_id: row.requires_id
				}
				let res = await requiresRun(para);
				if (res.data) {
					this.getTableData1();
				}else if(res.tologin) {
					this.OUT_LOGIN();
					this.$router.push('/login');
				}else if(res.msg!='没有符合的记录'){
					this.$message.error(res.msg);
				}
			},

			// 重置 
			resetForm(formName){
				this.$refs[formName].resetFields();
			},
		}
	}

</script>

<style scoped lang="scss">
.table-expand {
	font-size: 14px;
	line-height: 23px;
	dl {
		margin: 0;
		padding: 0;
		float: left;
		width: 50%;
		position: relative;
		dt {
			margin: 0;
			position: absolute;
			top: 0;
			left: 0;
			color: #5E87B0;
		}
		dd {
			margin: 0;
			padding: 0 30px 0 100px;
			word-break:break-all;
			a {
				color:#5E87B0;
			}
		}
	}
}

.details .el-form-item {
	margin-bottom: 0;
	
	a {
		color:#5E87B0;
	}
	.dd-div {
		word-break:break-all;
	}
}
</style>